<html>
    <head>
        <title>Rubra</title>
        <link rel="stylesheet" href="css/reset.css" type="text/css"  />
        <link rel="stylesheet" href="css/grid.css" type="text/css" />
        <link rel="stylesheet" href="css/general.css" type="text/css" />
        <link rel="stylesheet" href="css/menu.css" type="text/css" />
        <link rel="stylesheet" href="css/jquery-ui-1.8.17.custom.css" type="text/css" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/modernizr-1.7.min.js"></script>
        <script src="js/jquery-ui-1.8.17.custom.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".button").button();
                $("#registrar_persona").click(function(){
                    window.location.href="pasajero_form.html";
                });
                /*jQuery.ajax({
                    type : 'GET',
                    url : '/app/persona",
                    contentType : 'application/json',
                    dataType : 'json',
                    success : servicioObtenerPersonasSuccessCallBack,
                    error : servicioObtenerPersonasErrorCallBack

                });*/
                
            });
            
            function servicioObtenerPersonasSuccessCallBack(data){
                $("#persona_row_tmpl").tmpl(data).appendTo("#listado");
            }
            function servicioObtenerPersonasErrorCallBack(data) {
                $("#listado").append(
                        $("<tr/>").append( 
                            $("<td/>").attr("colspan","7").text("Error al obtener el listado de personas")
                        ) 
                );
            }            
        </script>
        <script id="persona_row_tmpl" type="text/x-jquery-tmpl">
            <tr>
                <td>${apellido}, ${nombre}</td>
                <td>${tipoDoc}, ${numeroDoc}</td>
                <td>${email}</td>
                <td>${telefono}</td>
                <td>${telefonoMovil}</td>
                <td>
                    <a href="/app/page/persona/edicion/id/${id}">editar</a>
                </td>
            </tr>
        
        </script>
    </head>
    <body>
        <div class="head">
            <div class="row logo">
                <div class="col col_7">Rubra</div>
            </div>
            <div class="row">
        
                <ul class="menu">
                    <li><a href="#"><span>Administrador de eventos</span></a></li>
                    <li><a href="#"><span>Administrador de Personas</span></a></li>
                    <li><a href="#"><span>Administrador de usuarios</span></a></li>
                    <li><a href="#"><span>Eventos archivados</span></a></li>
                </ul>
                <div class="breadcrumb">
                    <span class="left"></span>
                      <ul>
                        <li><a href="#">Eventos</a></li>
                        <li><a href="#">un Evento</a></li>
                        <li><a href="#" class="active">Pasajeros</a></li>
                      </ul>
                    <span class="right"></span>
                </div>        
            </div>
                   
        </div>
        <div class="content">
            <div class="row">
                <h2>Pasajeros</h2>
                
            </div>
            <div class="row">
                <table class="listado">
                    <thead>
                        <tr>
                            <th>Apellido, Nombre</th>
                            <th>Documento</th>
                            <th>E-mail</th>
                            <th>Tel. Particular</th>
                            <th>Tel. M&oacute;vil</th>
                            <th>Acompa&ntilde;ante</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th colspan="7">
                                <span>1 pasajeros</span>
                            </th>
                        </tr>
                    <tfoot>    
                    <tbody id="listado">
                        <tr>
                            <td>Perez, Juan</td>
                            <td>DNI, 30999666</td>
                            <td>juan.perez@gmail.com</td>
                            <td>55557777</td>
                            <td>46780987</td>
                            <td>si</td>
                            <td>
                                <a href="#">editar</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button class="button" id="registrar_persona">Ingresar una persona</button>
            </div>        
        </div>
        <div class="row footer">
        
        </div>
    </body>
</html>
